<template>
    <div class="article_nested_comments_box outer_shadows">
        <ul class="article_nested_comments_box_list">
            <li v-for="(item,index) in props.list" :key="index">
                <img :src="digital.avatar(item.email)" alt="" class="article_nested_comments_box_avatar">
                <div class="article_nested_comments_box_content">
                    <div class="article_nested_comments_box_browser">
                        <img src="/public/img/win.png" alt="">
                        <img src="/public/img/chrome.png" alt="">
                    </div>
                    <div class="article_nested_comments_box_header">
                        <span class="article_nested_comments_box_user">@{{ item.username }} 回复 {{ item.replyName }}</span>
                        <span class="article_nested_comments_box_time">{{ dayjs(item.time).format(base.timeFormat) }}</span>
                    </div>
                    <p class="article_nested_comments_box_body">{{ item.content }}</p>
                    <!--关闭评论框-->
                    <div v-if="bool_c === index" class="article_nested_comments_box_publication">
                        <span class="article_details_comments_publication_title">@{{ item.username }}</span>
                        <span class="article_nested_comments_box_publication_dis" @click="reply(index,true)">X</span>
                    </div>
                    <ArticleDetailsPublication @replySub="reply_sub"
                                               :username="item.username"
                                               v-if="bool_c === index"></ArticleDetailsPublication>
                </div>
                <img src="/public/img/huifu.png" alt="" class="article_nested_comments_box_reply"
                     v-show="store.state.user && item.uid !== store.state.user.id"
                     @click="reply(index,false)">
            </li>
        </ul>

    </div>
</template>

<script setup>

import base from "@/config/constant/constant.js"
import ArticleDetailsPublication from "@/components/detail/ArticleDetailsPublication.vue";
import {reactive, ref, watchEffect} from "vue";
import dayjs from "dayjs";
import store from "@/store/index.js";
import router from "@/router/index.js";
import api from "@/request/index.js";
import digital from "@/config/methods/digital.js";

//评论内容列表
const props = defineProps({
    list: Array,
    eid: Number,
    replyId: Number, //该评论回复的用户id，不是评论者的id
})


//emit 自定义事件
const emit = defineEmits(['reply_sub'])

//是否显示回复框
const bool_c = ref(-1);

// //获取浏览器类型，获取图片
// const platform = () => {
//     let path = [];
//     //获取浏览器用户使用的浏览器型号系统信息
//     const userAgent = navigator.userAgent;
//     if (userAgent.indexOf("Windows") !== -1)  path.push("/img/win.png");
//     else if (userAgent.indexOf("Mac") !== -1) path.push("/img/macOS.png");
//     else if (userAgent.indexOf("X11") !== -1) path.push("UNIX");
//     else if (userAgent.indexOf("Linux") !== -1)
//         path.push("/img/linux.png");
//     else
//         path.push("Other");
//     let mb = myBrowser();
//     if ("IE" == mb) {
//         path.push("/img/ie.png");
//     }
//     if ("FF" == mb) {
//         path.push("Other");
//     }
//     if ("Chrome" == mb) {
//         path.push("/img/chrome.png");
//     }
//     if ("Opera" == mb) {
//         path.push("Other");
//     }
//     if ("Safari" == mb) {
//         path.push("/img/safari.png");
//     }
//     window.localStorage.setItem("platform", JSON.stringify(path));
// };
// //根据浏览器类型获取字符串
// const myBrowser = () => {
//     let userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
//     // console.log(userAgent)
//     let isOpera = userAgent.indexOf("Opera") > -1;
//     if (isOpera) {
//         return "Opera"
//     } //判断是否Opera浏览器
//     if (userAgent.indexOf("Firefox") > -1) {
//         return "FF";
//     } //判断是否Firefox浏览器
//     if (userAgent.indexOf("Chrome") > -1) {
//         return "Chrome";
//     }
//     if (userAgent.indexOf("Safari") > -1) {
//         return "Safari";
//     } //判断是否Safari浏览器
//     if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
//         return "IE";
//     } //判断是否IE浏览器
// };
//当前展开的子评论下标
const replyIndex = ref(-1);

//提交评论内容
const reply_sub = (info) => {

    bool_c.value = -1; //关闭评论框
    //发送请求新增数据
    props.list.unshift({
        uid: store.state.user.id,//评论者id
        replyId: props.list[replyIndex.value].uid, //回复的用户id
        eid: router.currentRoute.value.query.id,
        time: new Date(),
        systems: window.localStorage.getItem("systems"),
        browser: window.localStorage.getItem("browser"),
        content: info,
        pid:props.list[replyIndex.value].pid,
    })

    api.commentsAdd({
        uid: store.state.user.id,//评论者id
        replyId: props.list[replyIndex.value].uid, //回复的用户id
        eid: router.currentRoute.value.query.id,
        pid:props.list[replyIndex.value].pid,
        systems: window.localStorage.getItem("systems"),
        browser: window.localStorage.getItem("browser"),
        content: info,
    }).then((res) => {

    })
    reply('reply_sub', null, true) //关闭评论框
}

//关闭评论框,无操作内容
const reply = (index, bool) => {
    if (bool) {
        bool_c.value = -1; //关闭评论框
    } else {
        bool_c.value = index;
    }
    replyIndex.value = index;

    emit('reply_sub', null, bool);
}


</script>

<style scoped>
.article_nested_comments_box {
    width: 100%;
    padding-left: 20px !important;
    font-size: 15px;
}

.article_nested_comments_box_header {
    /*border-left: 3px solid #6da6e1;*/
    font-size: 17px;
    padding: 3px 10px;
}

.article_nested_comments_box_list {
    width: 100%;
    list-style: none;
}

.article_nested_comments_box_avatar {
    width: 35px;
    height: 35px;
    border-radius: 3px;
}

.article_nested_comments_box_list li {
    position: relative;
    display: flex;
    min-height: 110px;
    justify-content: space-between;
    margin: 10px;
}

.article_nested_comments_box_list li:hover .article_nested_comments_box_reply {
    display: inline-block;
}

.article_nested_comments_box_content {
    width: 100%;
    padding: 10px;
}

.article_nested_comments_box_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 0 5px;
}

.article_nested_comments_box_time {
    font-size: 13px;
}

.article_nested_comments_box_user {
   font-size: 15px;
}

.article_nested_comments_box_body {
    padding-left: 10px;
}

.article_nested_comments_box_browser {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.article_nested_comments_box_browser img {
    width: 18px;
    height: 18px;
    margin-right: 8px;

}

.article_nested_comments_box_reply {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
    cursor: pointer;
    transition: all .3s;
}

.article_nested_comments_box_reply:hover {
    background: rgba(109, 166, 225, 0.18);
}

.article_nested_comments_box_publication {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0;
    font-size: 18px;
}

.article_nested_comments_box_publication span:first-child {
    font-size: 16px;
}

.article_nested_comments_box_publication .article_nested_comments_box_publication_dis {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border-radius: 50%;
    background: #6da6e1;
    line-height: 20px;
    text-align: center;
    padding-left: 1px;
    color: white;
    transition: all .3s;
}

.article_nested_comments_box_publication_dis:hover {
    opacity: .7;
}
.article_details_comments_publication_title {
    display: inline-block;
    border-left: 3px solid #6da6e1;
    font-size: 14px;
    padding: 0 5px;
}
</style>